<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/Vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/frontstage.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1320167_8ud56ezxm8n.css">
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
    <div id="userinfo">
        <div class="topbar">
            <h1 class="theme">
                <img  class="logo" src="/imgs/logo.png">
            </h1>
            <ul class="theme">
                <li class="menu">
                    <a href="/">发现音乐</a>
                </li>
                <li class="menu">
                    <a :href="'/userInfo?id='+ userData.id">我的音乐</a>
                </li>
            </ul>
            
            <div class="login fr" >
                <el-dropdown v-if="userData == null">
                    <img class="user-avatar" src="/imgs/头像.png">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" @click="loginshow=true">登录</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="registershow=true">注册</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown v-else>
                    <img class="user-avatar" :src="userData.picture.resourcePath">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" :href="'/userInfo?id='+ userData.id">个人主页</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="exit">退出</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        
            <div class="search fr">	
                <div class="left_park_side"></div>
                <div class="right_park_side"></div>
                <form action="#" target="#">
                    <div class="searchbody">
                        <input type="text" name="keyword"  placeholder="张敬轩"/>
                    </div>
                    <button type="submit">
                        <i class="el-icon-search"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="userinfo">
            <div class="userinfo-show" v-if="editshow==false">
                <img class="user-pic" :src="userData.picture.resourcePath" >
                <div class="userinfo-content">
                    <div class="userinfo-title">
                        <span>{{ userData.username }}</span>
                        <i v-if="userData.sex == '女'" class="icon-sex el-icon-female"></i>
                        <i v-else class="icon-sex el-icon-male"></i>
                    </div>
                    <div class="user-info">
                        <div>昵称：<span>{{ userData.nickname }}</span></div>
                        <div>电话：<span>{{ userData.phone }}</span></div>
                        <div>邮箱：<span>{{ userData.email }}</span></div>
                        <div><el-button class="userinfo-btn" icon="el-icon-edit" @click="editshow=true" plain>编辑个人信息</el-button></div>
                    </div>
                </div>
            </div>
            
            <div class="userinfo-edit" v-else>
                <el-upload
                    class="avatar-uploader"
                    action="/uploadPicture"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-form  class="userinfo-form" ref="form" :model="form" label-width="50px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="form.sex"></el-input>
                        </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="editshow=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="likesong-list">
                <div class="likesong-title">
                    <!-- <span class="linhicon icon-heart"></span> -->
                    <span class="maintitle">{{ tableData[0].name }}</span>
                    <span>{{ tableData.length }}首</span>
                </div>
                <div class="likesong-table">
                    <el-table :data="tableData" style="width: 100%;margin-top:20px">
                        <el-table-column fixed prop="id" label width="48"></el-table-column>
                        <el-table-column label="标题">
                        <template slot-scope="scope">
                            <span>{{scope.row.title}}</span>
                            <a :href="'/songPlay?id='+ scope.row.sid" target="_blank"><i class="el-icon-video-play"></i></a>
                        </template>
                        </el-table-column>
                        <el-table-column prop="duration" label="时长" width="120"></el-table-column>
                        <el-table-column prop="singer" label="歌手" width="120"></el-table-column>
                    </el-table>
                </div>
            </div>
            
            <div class="ownsong-list">
                <div class="ownsong-title">
                    <span class="linhicon icon-gedan"></span>
                    <span >创建的歌单</span>
                    <span>({{ userData.ownedSonglists.length }})</span>
                </div>
                <div class="songlist-table">
                    <el-row v-for="(row, index) in owendrows" :key="index" :gutter="60">
                        <el-col :span="6" v-for="item of row" :key="item.id">
                        <div class="songlist-item">
                            <a @click="changelist(item)">
                            <img class="songlist-img" :src="item.songs[0].albums[0].picture.resourcePath"/>
                            </a>
                            <a @click="changelist(item)" class="songlist-name">{{ item.name }}</a>
                        </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="ownsong-list">
                <div class="ownsong-title">
                    <span class="linhicon icon-gedan"></span>
                    <span >收藏的歌单</span>
                    <span>({{ userData.likeSonglists.length}})</span>
                </div>
                <div class="songlist-table">
                    <el-row v-for="(row, index) in likerows" :key="index" :gutter="60">
                        <el-col :span="6" v-for="item of row" :key="item.id">
                        <div class="songlist-item">
                            <a @click="changelist(item)">
                            <img class="songlist-img" :src="item.songs[0].albums[0].picture.resourcePath"/>
                            </a>
                            <a @click="changelist(item)" class="songlist-name">{{ item.name }}</a>
                        </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <my-footer></my-footer>
    </div>

<script type="module" th:inline="javascript">
var user = [[${user}]]
console.log(user);
var mvplay = new Vue({
    el: '#userinfo',
    data() {
        return {
            editshow: false,
            tableData: [],
            userData: user,
            imageUrl:'',
            form: {
                id: user.id,
                username: user.username,
                nickname: user.nickname,
                phone: user.phone,
                email: user.email,
                sex: user.sex,
                picture: {
					id: user.picture.id,
                    resourcePath: user.picture.resourcePath
                },
            }
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            var resourcePath = '/picture/' + file.name;
			this.form.picture.id = -1;
            this.form.picture.resourcePath = resourcePath;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onSubmit(){
            $.ajax({
                url: "/modifyUser",
                type: "post",
                contentType: "application/json",
                async: false,
                data: JSON.stringify(this.form),
                success(data) {
                    window.location.href = "/userInfo?id="+ user.id;
                }
            });
        },
        changelist(list) {
            let table = [];
            // console.log(list);
            let songData = list.songs;
            for(let i in songData) {
                let singers = '';
                // console.log(songData[i].combinations);
                if( songData[i].combinations.length != 0) {
                    for(let j in songData[i].combinations) {
                        singers = singers + songData[i].combinations[j].name;
                    }
                } else {
                    for(let j in songData[i].singers) {
                        singers = singers + songData[i].singers[j].chinesename;
                    }
                }
                // console.log(list.name);
                table[i] = {
                    name: list.name,
                    id: parseInt(i)+1,
                    sid: songData[i].id,
                    title: songData[i].name,
                    duration: songData[i].duration,
                    singer: singers
                }
            }
            this.tableData = table;
        },
        exit(){
            $.ajax({
                url: "/logout",
                type: "post",
                contentType: "application/json",
                async: false,
                success(data) {
                    window.location.href = "/";
                }
            });
        }
    },
    computed: {
        owendrows() {
        const owendrows = [];
        this.userData.ownedSonglists.forEach((item, index) => {
            const row = Math.floor(index / 6)
            if (!owendrows[row]) {
                owendrows[row] = []
            }
            owendrows[row].push(item)
        })
        return owendrows
        },
        likerows() {
        const likerows = [];
        this.userData.likeSonglists.forEach((item, index) => {
            const row = Math.floor(index / 6)
            if (!likerows[row]) {
                likerows[row] = []
            }
            likerows[row].push(item)
        })
        return likerows
        },
    },
    mounted() {
        this.changelist(user.ownedSonglists[0]);
    },
    components: { 
        'my-footer': httpVueLoader('./vue/footer.vue')
    }
})
</script>

</body>
</html>